import dayjs from "dayjs";
import { usePublicHooks } from "../../hooks";
import { transformI18n } from "@/plugins/i18n";
import type { PaginationProps } from "@pureadmin/table";
import { getLogsLoginList, del } from "@/api/logsLoginApi";
import { reactive, ref, onMounted, toRaw } from "vue";
import { message } from "@/utils/message";

export function useRole() {
  const form = reactive({
    page: 1,
    perPage: 10,
    name: "",
    permissionChar: "",
    status: ""
  });
  const curRow = ref();
  const dataList = ref([]);
  const treeData = ref([]);
  const isShow = ref(false);
  const loading = ref(true);
  const isLinkage = ref(false);
  const isExpandAll = ref(false);
  const isSelectAll = ref(false);
  const { tagStyle } = usePublicHooks();
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      label: "登录ID",
      prop: "userLoginLogId"
    },
    {
      label: "登录用户",
      prop: "userName"
    },
    {
      label: "登录IP",
      prop: "ipAddress"
    },
    {
      label: "地区",
      prop: "loginPlace"
    },
    {
      label: "登录系统",
      prop: "os"
    },
    {
      label: "浏览器",
      prop: "browser"
    },
    {
      label: "状态",
      cellRenderer: ({ row, props }) => (
        <el-tag size={props.size} style={tagStyle.value(row.loginStatus)}>
          {row.loginStatus === 1 ? "成功" : "失败"}
        </el-tag>
      )
    },
    {
      label: "登录时间",
      prop: "loginAt",
      formatter: ({ loginAt }) => dayjs(loginAt).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ];
  function handleSizeChange(val: number) {
    loading.value = true;
    form.page = 1;
    form.perPage = val;
    getLogsLoginList(toRaw(form)).then(result => {
      dataList.value = result.result.list;
      pagination.total = result.result.total;
      pagination.pageSize = result.result.per_page;
      pagination.currentPage = 1;
    });

    setTimeout(() => {
      loading.value = false;
    }, 150);
  }

  function handleCurrentChange(val: number) {
    loading.value = true;
    form.page = val;
    getLogsLoginList(toRaw(form)).then(result => {
      dataList.value = result.result.list;
      pagination.total = result.result.total;
      pagination.pageSize = result.result.per_page;
      pagination.currentPage = result.result.current_page;
    });

    setTimeout(() => {
      loading.value = false;
    }, 150);
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }
  function handleDelete(row) {
    del({ userOperateLogId: row.userOperateLogId }).then(result => {
      if (result.code == 200) {
        message(`删除成功`, { type: "success" });
        onSearch();
      } else {
        message(`删除失败`, { type: "error" });
      }
    });
    onSearch();
  }
  async function onSearch() {
    loading.value = true;
    const { result } = await getLogsLoginList(toRaw(form));
    dataList.value = result.list;
    pagination.total = result.total;
    pagination.pageSize = result.per_page;
    pagination.currentPage = result.current_page;

    setTimeout(() => {
      loading.value = false;
    }, 150);
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };
  const onQueryChanged = () => {};

  const filterMethod = (query: string, node) => {
    return transformI18n(node.title)!.includes(query);
  };

  onMounted(async () => {
    onSearch();
  });
  return {
    form,
    isShow,
    curRow,
    loading,
    columns,
    dataList,
    treeData,
    isLinkage,
    pagination,
    isExpandAll,
    isSelectAll,
    onSearch,
    resetForm,
    filterMethod,
    transformI18n,
    onQueryChanged,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    handleDelete
  };
}
